<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>电影</title>


<!--  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>-->
  <script src="./js/vue2.6.12.js"></script>
  <script src="./js/axios.js"></script>
  <script src="./js/areas.js"></script>
  <!-- <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> -->
  <!-- <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
  <script type="text/javascript" src="./js/qs.js"></script>
  <script type="text/javascript" src="./js/common.js"></script>


  <link rel="stylesheet" href="./css/common.d1d257d3.css">
<link rel="stylesheet" href="./css/query-index.1928f8a5.css">

</head>
<body>

<div id="app">
<div class="header">
  <div class="header-inner">
    <a href="index.html" class="logo" ></a>
    <div class="city-container" >
      <div class="city-selected">
        <div class="city-name">
          &nbsp;
          <!--                        <span class="caret"></span>-->
        </div>
      </div>
      <div class="city-list" >
        <div class="city-list-header">定位城市：<a class="js-geo-city">上海</a></div>
      </div>
    </div>

    <div class="nav">
      <ul class="navbar">
        <li><a href="index.html" >首页</a></li>
        <li><a href="movie.html" >电影</a></li>
        <li><a href="cinema.html" >影院</a></li>
        <li><a href="dashboard_websocket.html" target="_blank">榜单</a></li>

      </ul>
    </div>

    <div class="user-info" v-if="islogin">
      <div class="user-avatar has-login">
        <img src="./images/63957f10ae9679c95d4ba26ad1bd29c816882.png">
        <span class="caret"></span>
        <ul class="user-menu yes-login-menu">
          <li class="text"><a href="./orderlist.html">我的订单</a></li>
          <li class="text login-name"><a href="javascript:void(0)" >基本信息</a></li>
          <li class="text"><a href="javascript:void(0)" class="J-logout" @click="logout">退出登录</a></li>
        </ul>
      </div>
    </div>
    <div class="user-info" v-if="!islogin">
      <div class="user-avatar J-login">
        <img src="./images/7dd82a16316ab32c8359debdb04396ef2897.png">
        <span class="caret"></span>
        <ul class="user-menu no-login-menu">
          <li><a href="javascript:void(0)" @click="login">登录</a></li>
        </ul>
      </div>
    </div>
    <form  class="search-form" >
      <input name="kw" class="search" type="search" v-model="searchKey" maxlength="32" placeholder="找影视剧、影人、影院"
             autocomplete="off">
      <input class="submit" type="button"  @click="doSearch"/>
    </form>

  </div>
</div>
<div class="header-placeholder"></div>

<div class="search-box">
  <form class="search-form" >
    <input class="kw" type="text" name="kw" v-model="searchKey" maxlength="32"  placeholder="找影视剧、影人、影院" >
    <button class="submit" type="button" @click="doSearch"></button>
  </form>
</div>
<div class="subnav">
  <ul class="navbar">
    <li>
      <a :class="selectedTag==1?'active':''" href="javascript:void(0);" @click="changeTag(1)">影视剧（{{movieList.length}}）</a>
    </li>
    <li>
      <a :class="selectedTag==2?'active':''" href="javascript:void(0);" @click="changeTag(2)">影人（{{actorList.length}}）</a>
    </li>
    <li>
      <a :class="selectedTag==3?'active':''" href="javascript:void(0);"  @click="changeTag(3)">影院（{{cinemaList.length}}）</a>
    </li>
  </ul>
</div>


    <div class="container" >
<div class="search-result-box" >
      <ul class="celebrity-list" :style="celebrityListVisible">
        <li v-for="actor in actorList" :key="actor.actorId">
          <div class="item-poster">
            <a href="javascript:void(0)" >
              <div class="poster">
                <img src="./search_files/loading_2.e3d934bf.png" class="poster-default">
                <img :src="actor.actorImg" alt="">
              </div>
            </a>
          </div>
          <div class="item-title"><a href="javascript:void(0)"  >{{actor.actorName}}</a></div>
          <div class="item-subtitle"></div>
          <div class="absolute-info">
            <div class="item-detail item-detail-orange"><b><span class="stonefont">{{actor.followers}}</span></b>人关注</div>
            <div class="item-detail item-detail-two-line line-clamp">{{actor.movieNames}}</div>
          </div>
        </li>


      </ul>

      <dl class="movie-list" :style="movieListVisible">
        <dd v-for="movie in movieList" :key="movie.movieId">
          <div class="movie-item film-channel">
            <a :href="'filmdetail.html?movieId='+movie.movieId"  >
              <div class="movie-poster">
                <img class="poster-default" src="./images/movie/loading_2.e3d934bf.png">
                <img  :src="movieImgPath+movie.movieImg">
              </div>
            </a>
            <div class="channel-action channel-action-sale">
              <a>购票</a>
            </div>

            <div class="movie-ver"><i class="imax2d"></i></div>
            <div class="movie-item-hover">
              <a href="javascript:void(0)" >
                <img class="movie-hover-img" :src="movie.movieImg" >
                <div class="movie-hover-info">
                  <div class="movie-hover-title" >
                    <span class="name ">{{movie.movieName}}</span>
                    <span class="score channel-detail-orange"><i class="integer">{{movie.movieScore}}</i></span>
                  </div>
                  <div class="movie-hover-title" >
                    <span class="hover-tag">类型:</span>
                    {{movie.movieTypeStr}}
                  </div>
                  <div class="movie-hover-title" >
                    <span class="hover-tag">主演:</span>
<!--                    {{movie.actors}}-->zhangsan
                  </div>
                  <div class="movie-hover-title movie-hover-brief">
                    <span class="hover-tag">上映时间/地点:</span>
                    {{movie.movieReleaseTime}}/{{movie.movieAreaName}}
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="channel-detail movie-item-title">
            <a href="javascript:void(0)" >{{movie.movieName}}</a>
          </div>
          <div class="movie-item-subtitle">{{movie.movieEname}}</div>
          <div class="absolute-info">
            <div class="channel-detail channel-detail-orange"><i class="integer">{{movie.movieScore}}分</i></div>

            <div class="movie-item-cat">
              {{movie.movieTypeStr}}
            </div>
            <div class="movie-item-pub">{{movie.movieReleaseTime}}&nbsp;{{movie.movieAreaName}}</div>
          </div>

        </dd>

      </dl>

  <ul class="cinema-list" :style="cinemaListVisible">
     <li v-for="cinema in cinemaList">
      <div class="item-price">
        <b>30</b>元起
      </div>
      <div class="item-title">
        <a href="javascript:void(0)"  >{{cinema.cinemaName}}</a>
      </div>
      <div class="item-detail item-detail-gray">
        {{cinema.cinemaLocation}}
      </div>
      <div class="item-detail item-detail-icons">
        <i class="icon-zuo">座</i>
        <i class="icon-chi">小吃</i>
      </div>
    </li>

  </ul>
    <div class="pager"></div>
</div>


    </div>

<div class="footer" style="visibility: visible;">

</div>
</div>

</body>
<script>
  let vm = new Vue({
    el: "#app",//绑定，告知vue负责管理页面的哪个部分
    data: {
      islogin:false,
      cinemaList:[],//影院列表
      actorList:[],//演员列表
      movieList:[],//电影列表
      searchKey:'',//搜索关键字
      selectedTag:1,//被选中的查询标签（1-影视剧，2-影人，3-影院）
      celebrityListVisible:{'display':'none'},
      cinemaListVisible:{'display':'none'},
      movieListVisible:{'display':''},
      movieImgPath:'./images/'
    },
    methods: {

      /**
       * 切换页面中的电影、电影院、演员标签
       * tagId=1代表显示电影，把电影div的css设置为可见，其他两个设置为不可见
             this.celebrityListVisible={'display':'none'}
             this.movieListVisible={'display':''}
             this.cinemaListVisible={'display':'none'}
       * tagId=2代表显示演员，把演员div的css设置为可见，其他两个设置不可见
             this.celebrityListVisible={'display':''}
             this.movieListVisible={'display':'none'}
             this.cinemaListVisible={'display':'none'}
       *
       * tagId=3代表显示电影院，把电影院div的css设置为可见，其他两个设置为不可见
           this.celebrityListVisible={'display':'none'}
           this.movieListVisible={'display':'none'}
           this.cinemaListVisible={'display':''}
       * 最后把tagId赋值给this.selectedTag=tagId
       */
      changeTag(tagId){
        if(tagId==1){
          this.celebrityListVisible={'display':'none'}
          this.movieListVisible={'display':''}
          this.cinemaListVisible={'display':'none'}
        }else if(tagId==2){
          this.celebrityListVisible={'display':''}
          this.movieListVisible={'display':'none'}
          this.cinemaListVisible={'display':'none'}
        }else{
          this.celebrityListVisible={'display':'none'}
          this.movieListVisible={'display':'none'}
          this.cinemaListVisible={'display':''}
        }
        this.selectedTag=tagId
      },

      //从搜索引擎中查询数据
      doSearch() {
        //1.从es中查询电影列表
        /**
         * url: search/search/movie/list
         * method get
         * param: searchKey = this.searchKey
         * return
         *   在响应函数中 把返回的值赋给this.movieList = res.data
         */
        axios({
          url:'search/web/search/movie/list',
          method:'get',
          params:{
            searchKey:this.searchKey
          }
        }).then(res=>{
          console.log('movieList=====',res )
          this.movieList = res.data
          // console.log('movieList',this.movieList )
        })

        //2.从es中查询演员列表
        /**
         * url: search/search/actor/list
         * method get
         * param: searchKey = this.searchKey
         * return
         *   在响应函数中 把返回的值赋给this.actorList = res.data
         */
        axios({
          url:'search/web/search/actor/list',
          method:'get',
          params:{
            searchKey:this.searchKey
          }
        }).then(res=>{
          console.log('actorList=====',res )
          this.actorList = res.data
          // console.log('actorList',this.actorList )
        })

        //3.从es中查询电影院列表
        /**
         * url: search/search/cinema/list
         * method get
         * param: searchKey = this.searchKey
         * return
         *   在响应函数中 把返回的值赋给this.cinemaList = res.data
         */
        axios({
          url:'search/web/search/cinema/list',
          method:'get',
          params:{
            searchKey:this.searchKey
          }
        }).then(res=>{
          console.log('cinemaList=====',res )
          this.cinemaList = res.data
          // console.log('cinemaList',this.cinemaList )
        })
      },

      logout(){
        removeToken()
        localStorage.removeItem("user_cellphone")
        location.href="index.html"
      },
      login(){
        location.href='login.html'
      },
      checkIsLogin(){
        if(getToken()){
          this.islogin=true;
        }
      }
    },
    /**
     * 如果从其他页面输入的查询内容，跳转到当前页面，那么url中应该有参数searchKey
     * 因此，把url中的参数searchKey的值获取到，并且保存到临时变量this.searchKey中
     * 然后判断如果this.searchKey不为空if（this.searchKey），那么调用this.doSearch()发起查询请求
     */
    created() {
      this.searchKey=GetQueryString("searchKey")
      this.doSearch();
    }
  })
</script>
</html>
